<template>
    <el-dialog v-model="dialogVisible" title="添加分组" width="500">
        <el-form :model="groupItem">
            <el-form-item label="分组名称">
                <el-input v-model="groupItem.address" />
            </el-form-item>
        </el-form>
        <p>{{ groupItem }}</p>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="onConfirmBtn(groupItem)">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const emit = defineEmits(['onAddBtn','onUpdatedBtn'])
// 控制弹窗的打开关闭状态
const dialogVisible = ref(false);
const groupItem:any = ref<{id?:number,data?:string,address?:number}>({});
const openDialog = (formItem:{id:string,name:string}) => {
    if (formItem) {
        groupItem.value = { ...formItem };
    } else {
        groupItem.value = {};
    }

    dialogVisible.value = true;
}

type GroupItemType = {id?:number,address:string,data?:number};
defineExpose({
    openDialog
})




function onConfirmBtn(item:GroupItemType){
    if(item.id){
        onUpdated();
    }else{
        onAdd();
    }
}


function onAdd(){
    emit('onAddBtn', groupItem.value);
     dialogVisible.value = false;
    ElMessage({
        type: 'success',
        message: '添加成功',
    })
}
function onUpdated(){
    emit('onUpdatedBtn',groupItem.value);
    dialogVisible.value = false;
    ElMessage({
        type: 'success',
        message: '修改成功',
    })
}


</script>

<style scoped></style>